<script setup lang="ts">
import {Repl, ReplStore} from '@vue/repl'
import {ref, watchEffect} from 'vue'
import {downloadProject} from './download/download'

const setVH = () => {
  document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
}
window.addEventListener('resize', setVH)
setVH()

let hash = location.hash.slice(1)

const store = new ReplStore({
  serializedState: hash,
  showOutput: true,
  outputMode: "preview",
  defaultVueRuntimeURL: `${location.origin}/runtime-dom.esm-browser.js`
})

// enable experimental features
const sfcOptions = {
  script: {
    inlineTemplate: true,
    isProd: true,
    reactivityTransform: true
  },
  style: {
    isProd: true
  },
  template: {
    isProd: true
  }
}

// persist state
watchEffect(() => {
  history.replaceState({}, '', store.serialize())
})
</script>

<template>
  <div style="height: 30px">
    <button
        style="background: unset"
        title="Download project files"
        @click="downloadProject(store)"
    >下载
    </button>
  </div>
  <Repl
      @keydown.ctrl.s.prevent
      @keydown.meta.s.prevent
      :store="store"
      :showCompileOutput="true"
      :autoResize="true"
      :sfcOptions="sfcOptions"
      :clearConsole="false"
  />
</template>

<style>

body {
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
  Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  --base: #444;
  --nav-height: 50px;
}

.vue-repl {
  height: calc(var(--vh) - var(--nav-height));
}

button {
  border: none;
  outline: none;
  cursor: pointer;
  margin: 0;
  background-color: transparent;
}
</style>
